<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 设置手机端全屏显示，不允许出现滚动条  -->
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<!-- 忽略页面中的数字识别为电话，忽略email识别 -->
		<meta name="format-detection" content="telphone=no, email=no" />
		<script>
			document.documentElement.style.fontSize = document.documentElement.clientWidth/320*20+'px';
			window.onresize = function(){
				document.documentElement.style.fontSize = document.documentElement.clientWidth/320*20+'px';
			}
		</script>
		<link href="css/svg/font.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" href="css/sousuo/style.css" />
		<script type="text/javascript" src="js/jquery-2.1.4.min.js" ></script>
	</head>
	<body>
		
		<div class="box">
			
		<top>
		<a href="zhuye.html"><img src="img/j111.jpg"></a>	
		<input type="search" placeholder="陪宝宝过好日子"  id="sousuo"/>
		<p id="right">搜索</p>	
		</top>	
			
			<sousuo>
			<i class="icon-search"></i>	
			<p>最近搜索</p>
			<span id="shan">删除</span>
			</sousuo>
			
		<center id="lishi">
		<p></p>	
		
		</center>	
			
			
		
		   <remen>
			<i><img src="img/huo.jpg"></i>	
			<p>热门搜索</p>				
			</remen>
		
		<ul id="lei">
			<li><a href="javascript:;">百草味</a></li>
			<li><a href="javascript:;">牛奶</a></li>
			<li><a href="javascript:;">纸巾</a></li>
			<li><a href="javascript:;">洗衣液</a></li>
			<li><a href="javascript:;">饼干</a></li>
			<li><a href="javascript:;">牙膏</a></li>
			<li><a href="javascript:;">洗发水</a></li>
			<li><a href="javascript:;">饮料</a></li>
			<li><a href="javascript:;">肉</a></li>
			<li><a href="javascript:;">糕点</a></li>
			
		</ul>
		
		
		</div>		
	</body>
	
	<script type="text/javascript">		
		
		$("#lei>li").click(function(){
			$("#sousuo").val($(this).text())
		
		})
		
		
		
		
		
		$("#shan").bind('click',function(){
			$('#lishi').html("<p>暂无搜索历史</p>");
			localStorage.his = "";
		})
	
	
	
		
		var His = localStorage.his;
		if(His){
			$('#lishi p').hide();
			var jilv = His.split(',');
			for(var i=0; i<jilv.length-1; i++){
				$('#lishi').prepend('<span>'+ jilv[i] +'</span>');
			}
		}else{
			$('#lishi').html('<p>暂无搜索历史</p>');
		}	
		
		
		
		
		//按搜索框内容搜索商品
		$('#right').bind('click',function(){
			if($('#sousuo').val() == ''){
				$('#sousuo').val("请输入商品")
			}else{
				$.ajax({
					type: "post",
					url: "http://192.168.1.100/supermarket/data/getcommditybykw.php",
					async: true,
					data: {
						'kw': $('#sousuo').val()
					},
					dataType: "jsonp", //使用jsop开始跨域
					jsonp: "callback", //告诉后台，我需要一个回调函数
					jsonpCallback: "success_jsonpCallback", //回调函数的名称
					success: function(data) {
						//debugger;
						if(data == ''){
							$('#sousuo').val('未搜索到商品!');
						}else{
							if(localStorage.his){
									
		                 localStorage.his += $('#sousuo').val() + ',';
							}else{
							localStorage.his = $('#sousuo').val() + ',';
							}    
							localStorage.sou = $('#sousuo').val();
							window.location.href = 'searchResult.html';
						}
						
					},
					error: function(data) {}
				})
			}
		})
		
	</script>
	
	
	
	
	
</html>
